<template>
	<view>
		<u-navbar :placeholder="true" autoBack fixed>
			<template v-slot:center>
				<view class="flex-1 flex flex-row items-center bg-[#f3f4f6] rounded-[25px] h-[36px] leading-[36px] px-[8px]">
					<u-icon size="24" name="search" color='rgb(48, 49, 51)'></u-icon>
					<u-tag @click="tagClick()" class="ml-[16px]" icon-pos="right" :text="query.keyword" shape="circle" borderColor="rgb(121,121,121)" bgColor="rgb(121,121,121)" color="#FFFFFF" closeColor="#FFFFFF" icon="close"></u-tag>
				</view>
			</template>
			<template v-slot:right>
				<view class="flex flex-row items-center">
					<u-icon @click="changeMode()" :name="listMode == 'list' ? 'grid' : 'list-dot'" size="30" color="rgb(48, 49, 51)"></u-icon>
				</view>
			</template>
		</u-navbar>
		<goodsList :list="goodList" :mode="listMode"></goodsList>
		<u-empty mode="search" :show="goodList.length == 0 && !isLoading"></u-empty>
		<u-loadmore v-if="isLoading || goodList.length > 0" dashed height="40" marginTop="0" marginBottom="0" :status="isLoading ? 'loading' : hasMore ? 'loadmore' : 'nomore'" nomoreText="暂无更多搜索结果"></u-loadmore>
	</view>
</template>

<script setup>
	import {ref, unref} from "vue";
	import * as uniapp from "@dcloudio/uni-app";
	import goodsList from "@/components/goodsList/goodsList";
	
	const listMode = ref('grid');
	
	const changeMode = () => {
		unref(listMode) == 'grid' ? listMode.value = 'list' : listMode.value = 'grid'
	}
	
	const query = ref({
		keyword:''
	})
	const isLoading = ref(false);
	const hasMore = ref(false);
	
	const goodList = ref([]);
	
	const tagClick = () => {
		uni.navigateBack()
	}
	
	uniapp.onLoad(option => {
		query.value.keyword = option.keyword
	})
</script>

<style lang="scss" scoped>
	::v-deep .u-navbar__content__left{
		position: relative !important;
	}
	
	::v-deep .u-navbar__content__right{
		position: relative !important;
	}
</style>
